<template>
    <div>
        <h1>一个人的信息：</h1>
        <h1>姓：<input type="text" v-model="person.firstName"></h1>
        <h1>名：<input type="text" v-model="person.lastName"></h1>
        <h1>拼接 姓名：{{person.firstName}} - {{person.lastName}}</h1>
        <h1>计算属性 姓名：{{person.fullName}}</h1>
        <h1>全名：<input type="text" v-model="person.fullName"></h1>
    </div>
</template>

<script>
    // Vue3中的computed 是一个组合式的api，所以需要通过import 进行引入。
    import { reactive, computed } from 'vue';
    export default {
        name: 'Demo',
        setup() {
            // 数据
            const person = reactive({
                firstName: '张',
                lastName: '三',
            });

            // 计算属性
            // let fullName = computed(() => {
            //     return person.firstName + "-" + person.lastName;
            // });

            // 1、计算属性——简写（没有考虑计算属性被修改的情况）
            // 更加合理的设计是将fullName放到person身上
            // person.fullName = computed(() => {
            //     return person.firstName + "-" + person.lastName;
            // });

            // 2、计算属性——完整写法（考虑读和写）
            person.fullName = computed({
                get() {
                    return person.firstName + "-" + person.lastName;
                },
                set(value) {
                    const nameArr = value.split('-');
                    person.firstName = nameArr[0];
                    person.lastName = nameArr[1];
                }
            });

            // 返回一个对象（常用）
            return {
                person
            }
        }
    }
</script>

<style>

</style>